<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>模板管理</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}">
    <link rel="stylesheet" th:href="@{/pear/component/jqueryui/jquery-ui.min.css}"/>
    <link rel="stylesheet" th:href="@{/pear/component/elfinder/css/elfinder.min.css}">
    <link rel="stylesheet" th:href="@{/pear/component/elfinder/css/theme.css}">
    <!-- 加 载 样 式 -->
    <link rel="stylesheet" th:href="@{/pear/admin/css/loader.css}"/>
    <!-- 布 局 样 式 -->
    <link rel="stylesheet" th:href="@{/pear/admin/css/admin.css}"/>
    <link rel="stylesheet" th:href="@{/pear/admin/css/admin.dark.css}"/>
    <link rel="stylesheet" th:href="@{/pear/admin/css/variables.css}"/>
    <link rel="stylesheet" th:href="@{/pear/admin/css/reset.css}"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <div style="text-align: right; margin-bottom: 10px;">
            <button type="button" class="layui-btn layui-btn-md " id="static_file"
                    lay-event="static-manage">
                <i class="layui-icon layui-icon-folder"></i>
                模版静态文件管理
            </button>
        </div>
        <form class="layui-form" lay-filter="template-query-form">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">模版名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="template_name" placeholder="请输入模版名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">模版类别</label>
                    <div class="layui-input-inline">
                        <input type="text" name="template_type" placeholder="请输入模版类别" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="layui-btn layui-btn-md " lay-submit lay-filter="template-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="template-table" lay-filter="template-table"></table>
    </div>
</div>

<script type="text/html" id="template-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn   layui-btn-md" lay-event="add" sa:hasPermission="template_add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
    </div>
</script>

<script type="text/html" id="template-bar">
    <div class="layui-clear-space">
        <button class="layui-btn   layui-btn-sm" sa:hasPermission="template_update" lay-event="edit"><i
                class="layui-icon layui-icon-edit"></i>
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" sa:hasPermission="template_delete" lay-event="remove"><i
                class="layui-icon layui-icon-delete"></i>
        </button>
    </div>
</script>

<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:src="@{/pear/component/jquery/jquery.min.js}"></script>
<script th:src="@{/pear/component/jqueryui/jquery-ui.min.js}"></script>
<script th:src="@{/pear/js/crypto-js.min.js}"></script>
<script th:src="@{/pear/component/elfinder/elfinder.min.js}"></script>
<script th:src="@{/pear/component/elfinder/proxy/elFinderSupportVer1.js}"></script>
<script th:src="@{/pear/component/elfinder/i18n/elfinder.zh_CN.js}"></script>
<script th:inline="javascript">
    layui.use(['table', 'form', 'jquery'], function () {
        let baseURL = /*[[@{/}]]*/ '';
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let MODULE_PATH = baseURL + "cms/template/";
        table.render({
            elem: '#template-table',
            url: MODULE_PATH + 'list', // 数据接口
            page: true,
            limit: 10,
            limits: [10, 20, 30],
            request: {
                pageName: 'pageNum', // 页码参数名称
                limitName: 'pageSize' // 每页条数参数名称
            },
            where: {
                template_name: '', // 从搜索输入框中获取模版名
                type: '',  // 获取模版类别
            },
            toolbar: '#template-toolbar', // 添加工具栏
            parseData: function (res) { // 解析后端返回的数据
                return {
                    "code": res.code, // 状态码
                    "msg": res.msg, // 返回消息
                    "count": res.data.total, // 总条数
                    "data": res.data.list // 数据列表
                };
            },
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'templateName', title: '模版名', minWidth: 200},
                    {field: 'templateUrl', title: '模版路径'},
                    {field: 'typeName', title: '模版类别'},
                    {field: 'createTime', title: '创建时间'},
                    {title: '操作', templet: '#template-bar', width: 150, align: 'center'}
                ]
            ],
            response: {
                statusCode: 1000
            }
        });


        // 监听查询按钮，动态加载表格数据
        form.on('submit(template-query)', function (data) {
            // 获取表单中的查询条件
            let field = data.field;

            // 重新加载表格，并传递查询参数
            table.reload('template-table', {
                where: {
                    templateName: field.template_name,  // 模版名查询条件
                    type: field.template_type   // 模版类别查询条件
                },
                page: {
                    curr: 1 // 从第一页开始
                }
            });

            return false; // 阻止表单跳转
        });

        // 工具栏事件监听
        table.on('tool(template-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('toolbar(template-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        // 新增模版
        window.add = function () {
            layer.open({
                type: 2,
                title: '新增模版',
                shade: 0.1,
                area: ['900px', '800px'],
                content: 'template_add'
            });
        };

        // 修改模版
        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改模版',
                shade: 0.1,
                area: ['900px', '800px'],
                content: 'template_edit?templateId=' + obj.data.templateId,
            });
        };
        // 删除模版
        window.remove = function (obj) {
            layer.confirm('确定要删除该模版吗？', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "delete/" + obj.data.templateId,
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code === 1000) {
                            layer.msg(result.msg, {icon: 1, time: 2000}, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 2000});
                        }
                    },
                    error: function (error) {
                        layer.close(loading);
                        let msg = error.responseJSON ? error.responseJSON.msg : "服务器错误";
                        layer.msg(msg, {icon: 2});
                    }
                });
            });
        };
        //静态文件模板管理
        $('#static_file').on('click', function () {
            layer.open({
                type: 1,
                title: '静态文件模板管理',
                shade: 0.1,
                area: ['100%', '100%'],
                content: `<div id="elfinder"></div>`,
                success() {
                    $('#elfinder').elfinder({
                        url: baseURL + 'elfinder/connector',
                        type: 'POST',
                        lang: 'zh_CN',
                        transport: new elFinderSupportVer1(),
                    }).elfinder('instance');
                }
            });

        });

    });
</script>
</body>
</html>
